{% extends "finance/base.html" %}
{% load static %}
{% load custom_filters %}
{% load humanize %}

{% block content %}
<style>
    .metadata-table {
        font-size: 1.5rem !important;
    }

    .metadata-table th {
        font-size: 1.5rem !important;
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .metadata-table td {
        font-size: 1.5rem !important;
    }

    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
        font-size: 1.3rem;
    }

    .table td {
        font-size: 1.2rem;
    }

    .actions {
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .actions form {
        margin: 0;
        padding: 0;
        display: inline;
    }

    .table-container {
        width: 100%;
        overflow-x: auto;
        margin-bottom: 0;
    }

    .table {
        table-layout: fixed;
        width: 100%;
    }

    .card {
        background-color: white;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .table-container {
        width: 100%;
        overflow-x: auto;
    }

    .table th:nth-child(1),
    .table td:nth-child(1) {
        width: 3%;
    }

    .table th:nth-child(2),
    .table td:nth-child(2) {
        width: 20%;
    }

    .table th:nth-child(3),
    .table td:nth-child(3) {
        width: 30%;
    }

    .table th:nth-child(4),
    .table td:nth-child(4) {
        width: 15%;
        text-align: right;
    }

    .table th:nth-child(5),
    .table td:nth-child(5) {
        width: 10%;
        text-align: right;
    }

    .table th:nth-child(6),
    .table td:nth-child(6) {
        width: 5%;
        text-align: right;
    }

    /* Menyesuaikan lebar kolom tabel metadata */
    .metadata-table th:nth-child(1),
    .metadata-table td:nth-child(1) {
        width: 20%;
    }

    .metadata-table th:nth-child(2),
    .metadata-table td:nth-child(2) {
        width: 50%;
    }

    .metadata-table th:nth-child(3),
    .metadata-table td:nth-child(3) {
        width: 15%;
    }

    .metadata-table th:nth-child(4),
    .metadata-table td:nth-child(4) {
        width: 15%;
    }
    /* Hide the actual file input */
    #excel_upload {
        display: none;
    }

    /* Style the file path textbox */
    #excel_file_path {
        width: 800px; /* Double the width */
        padding: 6px 12px;
        margin-right: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    /* Add space after the "Choose File" button */
    label[for="excel_upload"] {
        margin-right: 10px;
    }

    /* Align form elements vertically */
    form[enctype="multipart/form-data"] {
        display: flex;
        align-items: center;
    }
</style>

<div class="d-flex justify-content-between align-items-center" style="padding: 1rem;">
    <h2 style="font-size: 3rem; font-weight: 500; margin: 0;">Journal Entry</h2>
    <div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newJournalModal">New Journal</button>
        <a href="{% url 'generate_pdf' %}" class="btn btn-secondary">Generate PDF</a>
        <a href="{% url 'export_excel' %}" class="btn btn-success">Export to Excel</a>
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#addEntryModal">Add Item</button>
    </div>
</div>

<div class="table-container">
    <table class="table table-bordered table-striped metadata-table" style="border-collapse: collapse; width: 100%;">
        <thead class="table-dark">
            <tr>
                <th scope="col">Ref. No</th>
                <th scope="col">Date</th>
                <th scope="col" style="text-align: right;">Currency</th>
                <th scope="col">Rate</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ ref_no }}</td>
                <td>{{ date }}</td>
                <td style="text-align: right;">{{ currsign }}</td>
                <td>{{ rate|format_rupiah }}</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="table-container">
    <table class="table table-striped table-hover">
        <thead class="table-dark">
            <tr>
                <th scope="col">No</th>
                <th scope="col">Account No</th>
                <th scope="col">Description</th>
                <th scope="col">IDR Amount</th>
                <th scope="col">USD Amount</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for journal in journals %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ journal.acct_no|format_acct_no }}</td>
                <td>{{ journal.descript }}</td>
                <td class="text-end">{{ journal.idramt|format_rupiah }}</td>
                <td class="text-end">{{ journal.usdamt|format_usd }}</td>
                <td class="d-inline-flex gap-2">
                    <a href="{% url 'edit_journal_entry' journal.id %}" class="btn btn-sm btn-secondary"><i class="bi bi-pencil"></i></a>
                    <form method="post" action="{% url 'delete_journal_entry' journal.id %}">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this entry?')"><i class="bi bi-trash"></i></button>
                    </form>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" class="text-center">No journal entries found</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div style="margin-top: 20px;">
    <h2>Upload Excel</h2>
    <form method="post" enctype="multipart/form-data" action="{% url 'upload_excel' %}">
        {% csrf_token %}
        <label for="excel_upload" class="btn btn-secondary">Choose File</label>
        <input type="file" name="excel_file" id="excel_upload" accept=".xlsx, .xls">
        <input type="text" id="excel_file_path" readonly placeholder="No file chosen">
        <button type="submit" class="btn btn-secondary">Upload Excel</button>
    </form>
</div>

<div class="modal fade" id="newJournalModal" tabindex="-1" aria-labelledby="newJournalModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg"> <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="newJournalModalLabel">New Journal Entry</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form id="newJournalForm" method="post" action="{% url 'create_journal' %}">
                {% csrf_token %}
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="ref_no_new" class="form-label">Ref. No</label>
                        <input type="text" class="form-control" id="ref_no_new" name="ref_no" value="{{ default_ref_no }}" required>
                    </div>
                    <div class="col-md-3">
                        <label for="date_new" class="form-label">Date</label>
                        <input type="date" class="form-control" id="date_new" name="date" value="{{ default_date|date:'Y-m-d' }}" required>
                    </div>
                    <div class="col-md-2">
                        <label for="currsign_new" class="form-label">Currency</label>
                        <input type="text" class="form-control" id="currsign_new" name="currsign" value="{{ default_currsign }}">
                    </div>
                    <div class="col-md-2">
                        <label for="rate_new" class="form-label">Rate</label>
                        <input type="text" class="form-control" id="rate_new" name="rate" value="{{ default_rate }}">
                    </div>
                </div>
                <div class="mb-3">
                    <label for="acct_no_new" class="form-label">Account No</label>
                    <select class="form-select" id="acct_no_new" name="acct_no" required>
                        <option value="" selected disabled>Select Account</option>
                        {% for account in accounts %}
                            <option value="{{ account.acct_no }}">{{ account.acct_no }} - {{ account.acct_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-3">
                    <label for="descript_new" class="form-label">Description</label>
                    <textarea class="form-control" id="descript_new" name="descript" rows="2"></textarea>
                </div>
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="idramt_new" class="form-label">IDR Amount</label>
                        <input type="text" class="form-control" id="idramt_new" name="idramt">
                    </div>
                    <div class="col-md-3">
                        <label for="debet_new" class="form-label">Debit</label>
                        <input type="text" class="form-control" id="debet_new" name="debet">
                    </div>
                    <div class="col-md-3">
                        <label for="credit_new" class="form-label">Credit</label>
                        <input type="text" class="form-control" id="credit_new" name="credit">
                    </div>
                    <div class="col-md-3">
                        <label for="usdamt_new" class="form-label">USD Amount</label>
                        <input type="text" class="form-control" id="usdamt_new" name="usdamt">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Create Journal Entry</button>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
    </div>
</div>

<div class="modal fade" id="addEntryModal" tabindex="-1" aria-labelledby="addEntryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addEntryModalLabel">Add New Journal Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addJournalForm" method="post" action="{% url 'add_journal' %}">
                    {% csrf_token %}
                    <div class="mb-3" style="display: none;">
                        <label for="ref_no_modal" class="form-label">Ref. No</label>
                        <input type="text" class="form-control" id="ref_no_modal" name="ref_no" value="{{ ref_no }}" readonly>
                    </div>
                    <div class="mb-3" style="display: none;">
                        <label for="date_modal" class="form-label">Date</label>
                        <input type="date" class="form-control" id="date_modal" name="date" value="{{ date }}" readonly required>
                    </div>
                    <div class="mb-3" style="display: none;">
                        <label for="currsign_modal" class="form-label">Currency</label>
                        <input type="text" class="form-control" id="currsign_modal" name="currsign_modal" value="{{ currsign }}" readonly>
                    </div>
                    <div class="mb-3" style="display: none;">
                        <label for="rate_modal" class="form-label">Rate</label>
                        <input type="text" class="form-control" id="rate_modal" name="rate_modal" value="{{ rate }}" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="acct_no_modal" class="form-label">Account No</label>
                        <select class="form-select" id="acct_no_modal" name="acct_no" required>
                            <option value="" selected disabled>Select Account</option>
                            {% for account in accounts %}
                                <option value="{{ account.acct_no }}">{{ account.acct_no }} - {{ account.acct_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="descript_modal" class="form-label">Description</label>
                        <textarea class="form-control" id="descript_modal" name="descript" rows="3" required></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="idramt_modal" class="form-label">IDR Amount</label>
                        <input type="text" class="form-control" id="idramt_modal" name="idramt_modal">
                    </div>
                    <div class="mb-3">
                        <label for="usdamt_modal" class="form-label">USD Amount</label>
                        <input type="text" class="form-control" id="usdamt_modal" name="usdamt_modal">
                    </div>
                    <button type="submit" class="btn btn-primary">Save Entry</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

<script>
    $(document).ready(function() {
        $('#idramt_new').mask('#.##0', { reverse: true });
        $('#debet_new').mask('#.##0', { reverse: true });
        $('#credit_new').mask('#.##0', { reverse: true });
        $('#usdamt_new').mask('#,##0.00', { reverse: true });

        // Automatic USD calculation in New Journal Modal
        $('#idramt_new, #debet_new, #credit_new').on('input', function() {
            var currsign = $('#currsign_new').val();
            var rate = parseFloat($('#rate_new').val());
            var idrAmount = parseFloat($(this).val().replace(/\./g, '').replace(',', '.')) || 0;
            var usdamtInput = $('#usdamt_new');

            if (currsign === 'IDR' && !isNaN(rate)) {
                var calculatedUsdamt = idrAmount / rate;
                usdamtInput.val(calculatedUsdamt.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
            } else if (currsign !== 'IDR') {
                usdamtInput.prop('readonly', false);
            } else {
                usdamtInput.val('');
                usdamtInput.prop('readonly', true);
            }
        });

        $('#currsign_new, #rate_new').on('change input', function() {
            $('#idramt_new').trigger('input'); // Recalculate USD when currency or rate changes
            $('#debet_new').trigger('input');
            $('#credit_new').trigger('input');
        });

        if ($('#currsign_new').val() === 'IDR') {
            $('#usdamt_new').prop('readonly', true);
        } else {
            $('#usdamt_new').prop('readonly', false);
        }
    });
</script>

{% endblock %}